// import Draw from "./uikit.js";

const draw = new Draw.Canvas("canvas", "medium");

const ctx1 = Draw.getContext()

ctx1.save();

const rect = new Draw.Rect(50, 50, 992, 326);
rect.radius = 50;
rect.padding.left = 50;
rect.padding.top = 50;
rect.backgroundColor = "white";
rect.shadowBlur = 30;
draw.add(rect);

ctx1.restore();

function getWeek(week, day) {
  let data = ["Mon", "Tue", "Wed", "Thu", "Fri"];

  return data.map((item, index) => {
    return {
      title: item,
      day: day - (week - index) + 1,
      isCurrent: index + 1 === week,
    };
  });
}

const currentDate = new Date();

const currentDay = currentDate.getDate();
const currentWeek = currentDate.getDay();

const data = getWeek(currentWeek, currentDay);

data.forEach((item, index) => {
  const container = new Draw.Rect(index * 178.4, 0, 178.4, 230);
  container.backgroundColor = "white";
  rect.add(container);

  const dateCon = new Draw.Rect(19, 0, 140, 230);

  dateCon.radius = 40;

  if (item.isCurrent) {
    dateCon.backgroundColor = "#352B2B";
  } else {
    dateCon.backgroundColor = "white";
  }

  container.add(dateCon);

  const weekNum = new Draw.Text(item.title);
  weekNum.align = "center";
  weekNum.x = 70;
  weekNum.y = 49;
  weekNum.font = "36px deyihei";
  if (item.isCurrent) {
    weekNum.textColor = "white";
  } else {
    weekNum.textColor = "black";
  }

  dateCon.add(weekNum);

  const dateNum = new Draw.Text(item.day);
  dateNum.align = "center";
  dateNum.x = 70;
  dateNum.y = 114;
  //     dateNum.fontSize = 64
  dateNum.font = "bold 64px deyihei";

  if (item.isCurrent) {
    dateNum.textColor = "white";
  } else {
    dateNum.textColor = "black";
  }
  dateCon.add(dateNum);
});

let tip = "距离周末还有" + (5 - currentWeek) + "天";

const countDonw = new Draw.Text(tip);
countDonw.x = 546;
countDonw.y = 416;
countDonw.align = "center";

countDonw.font = "50px deyihei";
draw.add(countDonw);

document.fonts.add(font);
countDonw.font = "50px deyihei";
draw.add(countDonw);
